import { useNavigate } from 'react-router-dom';
import { NavBar, List, Image, Button } from 'antd-mobile';
import goodsImg from '../assets/imgs/01.png';
import '../assets/style/goodsList.scss';

export default function GoodsList() {
    const navigate = useNavigate();
    return (
        <div className='goods-list-container'>
            <NavBar className='page-header' onBack={() => navigate(-1)}>商品列表</NavBar>

            <List>
                {[1, 2, 2, 2, 2].map((item, index) => (
                    <List.Item key={index} >
                        <div className='goods-item' >
                            <Image onClick={() => navigate(`/goods?id=${item}`)} src={goodsImg} fit="fill"></Image>
                            <div className="goods-info" onClick={() => navigate(`/goods?id=${item}`)}>
                                <strong>商品名称</strong>
                                <p className='price'>&yen;199</p>
                                <del>&yen;299</del>
                            </div>
                            <div className='actions'>
                                {/* 加入购物车 */}
                                <Button className='btn-add-cart' size="middle" color="warning">加入购物车</Button>
                            </div>
                        </div>

                    </List.Item>
                ))}
            </List>
        </div>
    )
}
